<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Less 扩充了 CSS 语言，增加了诸如变量、混合（mixin）、运算、函数等功能。 Less 既可以运行在服务器端（Node.js 和 Rhino 平台）也可以运行在客户端（浏览器）。
">
<meta name="author" content="The Core Less Team">

<title>
  Less 快速入门 | Less.js 中文文档 - Less 中文网
</title>

<!-- <link href="https://fonts.googleapis.bootcss.com/css?family=Noto+Serif|Oxygen" rel="stylesheet"> -->

<!-- Main styles -->
<link href="static/css/index.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="shortcut icon" href="https://less.bootcss.com/public/ico/favicon.ico">

  </head>
  <body class="index">

    
      
<div class="docs-header" id="content">
  <div class="container" style="text-align:center">
    <div>
      <img src="static/picture/less_logo.png" style="max-width: 264px">
      <h3>给 CSS 加点料。</h3>

      <p>在 Node.js 环境中使用 Less ：</p>
      <code>npm install -g less</code><br>
      <code>&gt; lessc styles.less styles.css</code>
      <br><br>
      <p>在浏览器环境中使用 Less ：</p>
      <code>&lt;link rel=&quot;stylesheet/less&quot; type=&quot;text/css&quot; href=&quot;styles.less&quot; /&gt;</code><br>
      <code>&lt;script src="<a href="javascript:;">//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js</a>" &gt;&lt;/script&gt;</code><br>

    </div>
  </div>
</div>


<div class="banner">
  <div class="container">
    Less 3.0 版本已发布！查看 <a href="javascript:;">更新日志</a>吧！
  </div>
</div>

    
    
    
    <div class="container docs-container">
      <div class="row">
        <div class="col-md-3">
          <div class="sidebar hidden-print" role="complementary">
            <div id="navigation">
  
<ul class="nav sidenav"><li><a href="#概览">概览</a></li>
<li><a href="#变量（variables）">变量（Variables）</a></li>
<li><a href="#混合（mixins）">混合（Mixins）</a></li>
<li><a href="#嵌套（nesting）">嵌套（Nesting）</a><ul class="nav"><li><a href="#嵌套（nesting）-规则嵌套和冒泡">@规则嵌套和冒泡</a></li></ul></li>
<li><a href="#运算（operations）">运算（Operations）</a><ul class="nav"><li><a href="#运算（operations）-calc-特例">calc() 特例</a></li></ul></li>
<li><a href="#转义（escaping）">转义（Escaping）</a></li>
<li><a href="#函数（functions）">函数（Functions）</a></li>
<li><a href="#命名空间和访问符">命名空间和访问符</a></li>
<li><a href="#映射（maps）">映射（Maps）</a></li>
<li><a href="#作用域（scope）">作用域（Scope）</a></li>
<li><a href="#注释（comments）">注释（Comments）</a></li>
<li><a href="#导入（importing）">导入（Importing）</a></li></ul></div>
          </div>
        </div>
        <div class="col-md-9" role="main">
          
          <header class="navbar navbar-inverse navbar-fixed-top docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        
        <li class="active">
          <span>首页</span>
        </li>
        

        <li>
          <a href="#概览">快速入门</a>
        </li>

        
        <li>
          <a href="javascript:;">Less.js 用法</a>
        </li>
        

        
        <li>
          <a href="javascript:;">Less 函数手册</a>
        </li>
        

        
        <li>
          <a href="javascript:;">进阶指南</a>
        </li>
        

        

        
        <li>
          <a href="javascript:;">工具</a>
        </li>
        

       
        
      </ul>
      <ul class="nav navbar-nav navbar-right">
        
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">GitHub <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li> <a href="javascript:;" target="_blank">Docs Repo</a> </li>
            <li> <a href="javascript:;" target="_blank">Docs Issues</a> </li>
            <li class="divider"></li>
            <li> <a href="javascript:;" target="_blank">Less Repo</a> </li>
            <li> <a href="javascript:;" target="_blank">Less Issues</a> </li>
          </ul>
        </li>
        <li>
          <a href="javascript:;" target="_blank">英文官网</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

          
<div class="panel docs-content">
  



<div class="docs-section">
  <div class="">
    <h1 class="docs-heading"><span class="anchor-target" id="概览"></span>
<a href="#概览" name="概览" class="anchor glyphicon glyphicon-link"></a>概览</h1>
  </div>
  <blockquote>
<p>Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。</p>
</blockquote>
<p>因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。</p>
<ul>
<li><em>有关 Less 语言特性的详细文档，请参阅 <a href="javascript:;">Less 语言特性</a> 章节</em></li>
<li><em>有关 Less 内置函数的列表，请参阅 <a href="javascript:;">Less 函数手册</a> 章节</em></li>
<li><em>有关详细的使用说明，请参阅 <a href="javascript:;">Less.js 用法</a> 章节</em></li>
<li><em>有关第三方工具的详细信息，请参阅 <a href="javascript:;">工具</a> 章节</em></li>
</ul>
<p>Less 到底为 CSS 添加了什么功能？以下就是这些新加功能的概览。</p>
<h1 class="docs-heading"><span class="anchor-target" id="变量（variables）"></span>
<a href="#变量（variables）" name="变量（variables）" class="anchor glyphicon glyphicon-link"></a>变量（Variables）</h1>
<p>无需多说，看代码一目了然：</p>
<pre><code class="lang-less"><span class="hljs-variable">@width:</span> <span class="hljs-number">10px</span>;
<span class="hljs-variable">@height:</span> <span class="hljs-variable">@width</span> + <span class="hljs-number">10px</span>;

<span class="hljs-id">#header</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-variable">@width</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-variable">@height</span>;
}
</code></pre>
<p>编译为：</p>
<pre><code class="lang-css"><span class="hljs-id">#header</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;
}
</code></pre>
<p><strong><a href="javascript:;">了解关于变量的更多信息</a></strong> </p>
<h1 class="docs-heading"><span class="anchor-target" id="混合（mixins）"></span>
<a href="#混合（mixins）" name="混合（mixins）" class="anchor glyphicon glyphicon-link"></a>混合（Mixins）</h1>
<p>混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：</p>
<pre><code class="lang-css"><span class="hljs-class">.bordered</span> {
  <span class="hljs-attribute">border-top</span>: dotted <span class="hljs-number">1px</span> black;
  <span class="hljs-attribute">border-bottom</span>: solid <span class="hljs-number">2px</span> black;
}
</code></pre>
<p>如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：</p>
<pre><code class="lang-less"><span class="hljs-id">#menu</span> <span class="hljs-tag">a</span> {
  <span class="hljs-attribute">color</span>: <span class="hljs-hexcolor">#111</span>;
  <span class="hljs-class">.bordered</span>();
}

<span class="hljs-class">.post</span> <span class="hljs-tag">a</span> {
  <span class="hljs-attribute">color</span>: red;
  <span class="hljs-class">.bordered</span>();
}
</code></pre>
<p><code>.bordered</code> 类所包含的属性就将同时出现在 <code>#menu a</code> 和 <code>.post a</code> 中了。（注意，你也可以使用 <code>#ids</code> 作为 mixin 使用。）</p>
<p><strong><a href="javascript:;">了解关于混合（Mixin）的更多信息</a></strong> </p>
<h1 class="docs-heading"><span class="anchor-target" id="嵌套（nesting）"></span>
<a href="#嵌套（nesting）" name="嵌套（nesting）" class="anchor glyphicon glyphicon-link"></a>嵌套（Nesting）</h1>
<p>Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：</p>
<pre><code class="lang-css"><span class="hljs-id">#header</span> {
  <span class="hljs-attribute">color</span>: black;
}
<span class="hljs-id">#header</span> <span class="hljs-class">.navigation</span> {
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
}
<span class="hljs-id">#header</span> <span class="hljs-class">.logo</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
}
</code></pre>
<p>用 Less 语言我们可以这样书写代码：</p>
<pre><code class="lang-less"><span class="hljs-id">#header</span> {
  <span class="hljs-attribute">color</span>: black;
  <span class="hljs-class">.navigation</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
  }
  <span class="hljs-class">.logo</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
  }
}
</code></pre>
<p>用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。</p>
<p>你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (<code>&amp;</code> 表示当前选择器的父级）：</p>
<pre><code class="lang-less"><span class="hljs-class">.clearfix</span> {
  <span class="hljs-attribute">display</span>: block;
  <span class="hljs-attribute">zoom</span>: <span class="hljs-number">1</span>;

  <span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">" "</span>;
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">clear</span>: both;
    <span class="hljs-attribute">visibility</span>: hidden;
  }
}
</code></pre>
<p><strong><a href="javascript:;">了解有关夫选择器的详细信息</a></strong> </p>
<h2 class="docs-heading"><span class="anchor-target" id="嵌套（nesting）-规则嵌套和冒泡"></span>
<a href="#嵌套（nesting）-规则嵌套和冒泡" name="嵌套（nesting）-规则嵌套和冒泡" class="anchor glyphicon glyphicon-link"></a>@规则嵌套和冒泡</h2>
<p>@ 规则（例如 <code>@media</code> 或 <code>@supports</code>）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。</p>
<pre><code class="lang-less"><span class="hljs-class">.component</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-at_rule">@media</span> (min-width: <span class="hljs-number">768px</span>) {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;
    <span class="hljs-at_rule">@media</span>  (min-resolution: <span class="hljs-number">192dpi</span>) {
      <span class="hljs-attribute">background-image</span>: url(<span class="hljs-string">/img/retina2x.png</span>);
    }
  }
  <span class="hljs-at_rule">@media</span> (min-width: <span class="hljs-number">1280px</span>) {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
  }
}

</code></pre>
<p>编译为：</p>
<pre><code class="lang-css"><span class="hljs-class">.component</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
}
<span class="hljs-at_rule">@media</span> (min-width: <span class="hljs-number">768px</span>) {
  <span class="hljs-class">.component</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;
  }
}
<span class="hljs-at_rule">@media</span> (min-width: <span class="hljs-number">768px</span>) and (min-resolution: <span class="hljs-number">192dpi</span>) {
  <span class="hljs-class">.component</span> {
    <span class="hljs-attribute">background-image</span>: url(<span class="hljs-string">/img/retina2x.png</span>);
  }
}
<span class="hljs-at_rule">@media</span> (min-width: <span class="hljs-number">1280px</span>) {
  <span class="hljs-class">.component</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;
  }
}
</code></pre>
<h1 class="docs-heading"><span class="anchor-target" id="运算（operations）"></span>
<a href="#运算（operations）" name="运算（operations）" class="anchor glyphicon glyphicon-link"></a>运算（Operations）</h1>
<p>算术运算符 <code>+</code>、<code>-</code>、<code>*</code>、<code>/</code> 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。</p>
<pre><code class="lang-less"><span class="hljs-comment">// 所有操作数被转换成相同的单位</span>
<span class="hljs-variable">@conversion-1:</span> <span class="hljs-number">5cm</span> + <span class="hljs-number">10mm</span>; <span class="hljs-comment">// 结果是 6cm</span>
<span class="hljs-variable">@conversion-2:</span> <span class="hljs-number">2</span> - <span class="hljs-number">3cm</span> - <span class="hljs-number">5mm</span>; <span class="hljs-comment">// 结果是 -1.5cm</span>

<span class="hljs-comment">// conversion is impossible</span>
<span class="hljs-variable">@incompatible-units:</span> <span class="hljs-number">2</span> + <span class="hljs-number">5px</span> - <span class="hljs-number">3cm</span>; <span class="hljs-comment">// 结果是 4px</span>

<span class="hljs-comment">// example with variables</span>
<span class="hljs-variable">@base:</span> <span class="hljs-number">5%</span>;
<span class="hljs-variable">@filler:</span> <span class="hljs-variable">@base</span> * <span class="hljs-number">2</span>; <span class="hljs-comment">// 结果是 10%</span>
<span class="hljs-variable">@other:</span> <span class="hljs-variable">@base</span> + <span class="hljs-variable">@filler</span>; <span class="hljs-comment">// 结果是 15%</span>
</code></pre>
<p>乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。</p>
<pre><code class="lang-less"><span class="hljs-variable">@base:</span> <span class="hljs-number">2cm</span> * <span class="hljs-number">3mm</span>; <span class="hljs-comment">// 结果是 6cm</span>
</code></pre>
<p>你还可以对颜色进行算术运算：</p>
<pre><code class="lang-less"><span class="hljs-variable">@color:</span> <span class="hljs-hexcolor">#224488</span> / <span class="hljs-number">2</span>; <span class="hljs-comment">//结果是 #112244</span>
<span class="hljs-attribute">background-color</span>: <span class="hljs-hexcolor">#112244</span> + <span class="hljs-hexcolor">#111</span>; <span class="hljs-comment">// 结果是 #223355</span>
</code></pre>
<p>不过，Less 提供的 <a href="javascript:;">色彩函数</a> 更有使用价值。</p>
<h2 class="docs-heading"><span class="anchor-target" id="运算（operations）-calc-特例"></span>
<a href="#运算（operations）-calc-特例" name="运算（operations）-calc-特例" class="anchor glyphicon glyphicon-link"></a>calc() 特例</h2>
<p><em>Released <a href="javascript:;">v3.0.0</a></em></p>
<p>为了与 CSS 保持兼容，<code>calc()</code> 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。</p>
<pre><code class="lang-less"><span class="hljs-variable">@var:</span> <span class="hljs-number">50vh</span>/<span class="hljs-number">2</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-function">calc</span>(<span class="hljs-number">50%</span> + (<span class="hljs-variable">@var</span> - <span class="hljs-number">20px</span>));  <span class="hljs-comment">// 结果是 calc(50% + (25vh - 20px))</span>
</code></pre>
<h1 class="docs-heading"><span class="anchor-target" id="转义（escaping）"></span>
<a href="#转义（escaping）" name="转义（escaping）" class="anchor glyphicon glyphicon-link"></a>转义（Escaping）</h1>
<p>转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 <code>~&quot;anything&quot;</code> 或 <code>~&#39;anything&#39;</code> 形式的内容都将按原样输出，除非 <a href="javascript:;">interpolation</a>。</p>
<pre><code class="lang-less"><span class="hljs-variable">@min768:</span> <span class="hljs-string">~"(min-width: 768px)"</span>;
<span class="hljs-class">.element</span> {
  <span class="hljs-at_rule">@media</span> <span class="hljs-variable">@min768</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.2rem</span>;
  }
}
</code></pre>
<p>编译为：</p>
<pre><code class="lang-less"><span class="hljs-at_rule">@media</span> (min-width: <span class="hljs-number">768px</span>) {
  <span class="hljs-class">.element</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.2rem</span>;
  }
}
</code></pre>
<p>注意，从 Less 3.5 开始，可以简写为：</p>
<pre><code class="lang-less"><span class="hljs-variable">@min768:</span> (min-width: <span class="hljs-number">768px</span>);
<span class="hljs-class">.element</span> {
  <span class="hljs-at_rule">@media</span> <span class="hljs-variable">@min768</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.2rem</span>;
  }
}
</code></pre>
<p>在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。</p>
<h1 class="docs-heading"><span class="anchor-target" id="函数（functions）"></span>
<a href="#函数（functions）" name="函数（functions）" class="anchor glyphicon glyphicon-link"></a>函数（Functions）</h1>
<p>Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在<a href="javascript:;">Less 函数手册</a>中有详细介绍。</p>
<p>函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：</p>
<pre><code class="lang-less"><span class="hljs-variable">@base:</span> <span class="hljs-hexcolor">#f04615</span>;
<span class="hljs-variable">@width:</span> <span class="hljs-number">0.5</span>;

<span class="hljs-class">.class</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-function">percentage</span>(<span class="hljs-variable">@width</span>); <span class="hljs-comment">// returns `50%`</span>
  <span class="hljs-attribute">color</span>: <span class="hljs-function">saturate</span>(<span class="hljs-variable">@base</span>, <span class="hljs-number">5%</span>);
  <span class="hljs-attribute">background-color</span>: <span class="hljs-function">spin</span>(<span class="hljs-function">lighten</span>(<span class="hljs-variable">@base</span>, <span class="hljs-number">25%</span>), <span class="hljs-number">8</span>);
}
</code></pre>
<p><strong><a href="javascript:;">参见：函数手册</a></strong> </p>
<h1 class="docs-heading"><span class="anchor-target" id="命名空间和访问符"></span>
<a href="#命名空间和访问符" name="命名空间和访问符" class="anchor glyphicon glyphicon-link"></a>命名空间和访问符</h1>
<p>(不要和 <a href="javascript:;">CSS <code>@namespace</code></a> 或 <a href="javascript:;">namespace selectors</a> 混淆了)。</p>
<p>有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 <code>#bundle</code> 之下，为了以后方便重用或分发：</p>
<pre><code class="lang-less"><span class="hljs-id">#bundle</span>() {
  <span class="hljs-class">.button</span> {
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
    <span class="hljs-attribute">background-color</span>: grey;
    <span class="hljs-keyword">&amp;</span><span class="hljs-pseudo">:hover</span> {
      <span class="hljs-attribute">background-color</span>: white;
    }
  }
  <span class="hljs-class">.tab</span> { ... }
  <span class="hljs-class">.citation</span> { ... }
}
</code></pre>
<p>现在，如果我们希望把 <code>.button</code> 类混合到 <code>#header a</code> 中，我们可以这样做：</p>
<pre><code class="lang-less"><span class="hljs-id">#header</span> <span class="hljs-tag">a</span> {
  <span class="hljs-attribute">color</span>: orange;
  <span class="hljs-id">#bundle</span><span class="hljs-class">.button</span>();  <span class="hljs-comment">// 还可以书写为 #bundle &gt; .button 形式</span>
}
</code></pre>
<p>注意：如果不希望它们出现在输出的 CSS 中，例如 <code>#bundle .tab</code>，请将 <code>()</code> 附加到命名空间（例如 <code>#bundle()</code>）后面。</p>
<h1 class="docs-heading"><span class="anchor-target" id="映射（maps）"></span>
<a href="#映射（maps）" name="映射（maps）" class="anchor glyphicon glyphicon-link"></a>映射（Maps）</h1>
<p>从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。</p>
<pre><code class="lang-less"><span class="hljs-id">#colors</span>() {
  <span class="hljs-attribute">primary</span>: blue;
  <span class="hljs-attribute">secondary</span>: green;
}

<span class="hljs-class">.button</span> {
  <span class="hljs-attribute">color</span>: #colors[primary];
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid #colors[secondary];
}
</code></pre>
<p>输出符合预期：</p>
<pre><code class="lang-css"><span class="hljs-class">.button</span> {
  <span class="hljs-attribute">color</span>: blue;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid green;
}
</code></pre>
<p><strong><a href="javascript:;">参见： 映射（Maps）</a></strong></p>
<h1 class="docs-heading"><span class="anchor-target" id="作用域（scope）"></span>
<a href="#作用域（scope）" name="作用域（scope）" class="anchor glyphicon glyphicon-link"></a>作用域（Scope）</h1>
<p>Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。</p>
<pre><code class="lang-less"><span class="hljs-variable">@var:</span> red;

<span class="hljs-id">#page</span> {
  <span class="hljs-variable">@var:</span> white;
  <span class="hljs-id">#header</span> {
    <span class="hljs-attribute">color</span>: <span class="hljs-variable">@var</span>; <span class="hljs-comment">// white</span>
  }
}
</code></pre>
<p>与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：</p>
<pre><code class="lang-less"><span class="hljs-variable">@var:</span> red;

<span class="hljs-id">#page</span> {
  <span class="hljs-id">#header</span> {
    <span class="hljs-attribute">color</span>: <span class="hljs-variable">@var</span>; <span class="hljs-comment">// white</span>
  }
  <span class="hljs-variable">@var:</span> white;
}
</code></pre>
<p><strong><a href="javascript:;">参见：懒加载</a></strong></p>
<h1 class="docs-heading"><span class="anchor-target" id="注释（comments）"></span>
<a href="#注释（comments）" name="注释（comments）" class="anchor glyphicon glyphicon-link"></a>注释（Comments）</h1>
<p>块注释和行注释都可以使用：</p>
<pre><code class="lang-less"><span class="hljs-comment">/* 一个块注释
 * style comment! */</span>
<span class="hljs-variable">@var:</span> red;

<span class="hljs-comment">// 这一行被注释掉了！</span>
<span class="hljs-variable">@var:</span> white;
</code></pre>
<h1 class="docs-heading"><span class="anchor-target" id="导入（importing）"></span>
<a href="#导入（importing）" name="导入（importing）" class="anchor glyphicon glyphicon-link"></a>导入（Importing）</h1>
<p>“导入”的工作方式和你预期的一样。你可以导入一个 <code>.less</code> 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 <code>.less</code> 扩展名，则可以将扩展名省略掉：</p>
<pre><code class="lang-css"><span class="hljs-at_rule">@import</span> <span class="hljs-string">"library"</span>; <span class="hljs-comment">// library.less</span>
<span class="hljs-at_rule">@import</span> <span class="hljs-string">"typo.css"</span>;
</code></pre>
<p><strong><a href="javascript:;">了解更多关于导入(Importing)的知识</a></strong> </p>

</div>



</div>
        </div>
      </div>
    </div>

    
    <footer class="footer" role="contentinfo">
  <div class="container">
    
    <p>Less 及其英文文档由 <a href="javascript:;">Less 核心开发小组</a>维护。</p>
    <p>Documentation source code released under the <a href="javascript:;" target="_blank">MIT License</a>, documentation under <a href="javascript:;">CC BY 3.0</a>.</p>
    <ul class="footer-links">
      <li>当前版本 v3.11.1</li>
      
      <li class="muted">&middot;</li>
      <li><a href="javascript:;">Less Language and Compiler Issues</a></li>
      <li class="muted">&middot;</li>
      <li><a href="javascript:;">Less Docs Issues</a></li>
      <li class="muted">&middot;</li>
      <li><a href="javascript:;">Changelog</a></li>
      
    </ul>
  </div>
</footer>


    
    <!-- Core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="static/js/jquery.min2.js"></script>
<script src="static/js/bootstrap.min2.js"></script>


<script src="static/js/holder.min.js"></script>
<script src="static/js/application.js"></script>




  </body>
</html>